<template>
  <div class="subject">
    <span>{{arr.a}}</span>
    <span>+</span>
    <span>{{arr.b}}</span>
    <span>=</span>
    <input :disabled="disabled" type="number" v-model="num" @click="numclick" />
    <button @click="submit">提交</button>
  </div>
</template>
<script>
export default {
  props: ["arr", "index", "disabled"],
  data() {
    return {
      num: 0
    };
  },
  methods: {
    numclick(e) {
      e.stopPropagation();
    },
    submit(e) {
      e.stopPropagation();
      let arr = this.arr;
      if (arr.a + arr.b == this.num) {
        this.disabled = true;
        this.$emit("onsub", "已完成", this.index);
      }
    }
  },
  watch: {},
  created() {
    this.disabled = false;
  },
  mounted() {}
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>